<!-- 级联选择 底部弹出 -->
<template>
	<uni-data-picker :localdata="options" v-model="fieldValue" :popup-title="$attrs.label" v-bind="$attrs" />
</template>

<script setup>
	import Com from '@/store/com.js'
	import _camelCase from 'lodash/camelCase';

	const com = Com()
	const emits = defineEmits(['update:modelValue']);
	/***
	 * 参数属性
	 * @property {Object[]} modelValue 默认值
	 * @property {String} type store.dispatch的方法名
	 */
	const props = defineProps({
		modelValue: {},
		type: {
			type: String
		},
		list: {
			type: Array,
		}
	})
	let dictType = computed(() => {
			if (props?.type) {
				if (props?.type?.startsWith('GET')) return props.type;
				return `GET${_camelCase(props.type)}`;
			}
		}),
		options = ref([]),
		fieldValue = computed({
			get() {
				return props.modelValue;
			},
			set(val) {
				emits('update:modelValue', val);
			},
		})

	watch(
		() => props.list,
		(val) => {
			options.value = val;
		}, {
			deep: true,
			immediate: true
		});

	watch(
		() => com[unref(dictType)?.replace('GET', '')],
		(val) => {
			if (unref(dictType)) options.value = val;
		}, {
			deep: true,
			immediate: true
		});

	/**
	 * 初始化执行逻辑
	 */
	if (unref(dictType)) com[unref(dictType)]();
	const filterData = (data = []) => {
		let list = []
		for (let item of data) {}
	}
</script>

<style scoped lang="scss">
	:deep() {
		.uni-data-pickerview {
			.selected-item {
				max-width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				uni-text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>